<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 刘洋
  Date: 2019/9/19
  Time: 10:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Login</title>
    <jsp:include page="${pageContext.request.contextPath}/layout/_imports.jsp"></jsp:include>
    <style>
        div {
            margin-bottom: 10px;
        }

        nav div {
            margin: 0;
        }

        .all {
            background-size: 100% 100%;
            background: url('../img/login.jpg') no-repeat;
        }
    </style>
</head>
<body>
<jsp:include page="../layout/_nav.jsp"></jsp:include>
<div class="all" style="width: 100%; height: 100%;">
    <form action="${pageContext.request.contextPath}/user" method="post" style="margin: 0 auto;width:600px;
text-align: center;padding-top:15%;">
        <input type="hidden" name="state" value="u.login">
        <div class="row">
            <div class="col col-sm-4" style="text-align: right;color: white;">UserName:</div>
            <div class="col col-sm-8"><input class="form-control" id="unm" type="text" name="uName"
                                             value="${param.uName}">
            </div>
        </div>
        <div class="row">
            <div class="col col-sm-4" style="text-align: right;color: white;">Password:</div>
            <div class="col col-sm-8"><input class="form-control" id="pwd" type="password" name="pwd"></div>
        </div>
        <div class="row">
            <div class="col col-sm-4" style="text-align: right;color: white;">kaptcha:</div>
            <div class="col col-sm-4"><input class="form-control" id="verificationInput" type="text" name="verify">
            </div>
            <img class="col col-sm-4" id="verificationImg" alt="验证码" src="/kaptcha.jpg" style="cursor:pointer;"
                 title="看不清？换一张"/>
        </div>

        <div class="alert alert-danger" role="alert" id="msg" <c:if test="${empty errMsg}">hidden</c:if>>${errMsg}</div>
        <input class="btn btn-outline-light" style="margin-left:20px;margin-top: 10px;" type="submit" value="Login"
               onclick="if (!allow) ('#msg').html('验证码错误'); return allow;">
        <input class="btn btn-outline-light" style="margin-left:20px;margin-top: 10px;" type="reset" value="Reset">
        <a href="register.jsp" class="btn btn-outline-light" style="margin-left:20px;margin-top: 10px;">register</a>
    </form>
    <script type="text/javascript">
        var allow = false;
        $(function () {
            $("#verificationImg").bind("click", function () {
                $(this).hide().attr('src', '/kaptcha.jpg?random=' + Math.random()).fadeIn();
            })

            $("#verificationInput").blur(function () {
                var value = $("#verificationInput").val();
                $.ajax({
                    url: "/checkKaptcha",
                    type: "post",
                    data: "verify=" + value,
                    beforeSend: function () {
                        $("#msg").removeAttr("hidden");
                        $("#msg").html("正在检测");
                    },
                    success: function (data) {
                        if (data == 0) {
                            $("#msg").html("验证码错误");
                        } else {
                            clearNotice();
                            allow = true;
                        }
                    }
                });
            });
            $("#verificationInput").focus(clearNotice);

            $("#unm").focus(clearNotice);

        });

        function clearNotice() {
            $("#msg").attr("hidden", "");
        }
    </script>
</div>
</body>
</html>